<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-10 17:12:58
-->
<template>
  <div ref="bottom4_container" id="container10" style="height: 95%"></div>
</template>
<script>
import { Gauge } from '@antv/g2plot';
export default {
  data() {
    return{
      dataArr:[]
    }
  },
  mounted(){
    this.initChart()
  },
  methods:{
    initChart(){
      //3、创建一个折线图实例
      const gauge = new Gauge(this.$refs.bottom4_container, {
      percent: 0.85,
  range: {
    color: 'l(0) 0:#B8E1FF 1:#f1e137',
  },
  startAngle: Math.PI,
  endAngle: 2 * Math.PI,
  indicator: null,
  statistic: {
    title: {
      offsetY: -36,
      style: {
        fontSize: '36px',
        color: '#4B535E',
      },
      formatter: () => '65%',
    },
    content: {
      style: {
        fontSize: '21px',
        lineHeight: '44px',
        color: '#4B535E',
      },
      formatter: () => '男女人口占比',
    },
  },
});
    //4、渲染折线图
      gauge.render();
    }
  }
  
}
</script>